A dual-color filled range Line chart

An dual-color filled range Line chart - so below the threshold it can be one color - and above it can be another. The threshold is controllable by you. The chart below uses randomised data so if you refresh the page it will be slightly different. It uses the Trace() effect as the Trace2() effect uses the clip() function also and so conflicts with the range clipping

Threshold:

Update
There's information on this HOWTO page about creating dual color line charts using gradients. It's very simple and can be done using either the RGraph Gradient() shortcut or more directly with the canvas linear gradient functionality.

This goes in the documents header:

<script src="RGraph.common.effects.js"></script>
<script src="RGraph.common.core.js"></script>
<script src="RGraph.line.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
Threshold: <input type="text" onkeyup="update(event)" value="40" id="val" />

This is the code that generates the chart:

<script>
    function update ()
    {
        var obj = document.getElementById('cvs').__object__;

        obj.set({
            filledRangeThreshold: Number(document.getElementById('val').value)
        });

        RGraph.clear(obj.canvas);
        obj.draw();
    }


    window.onload = function ()
    {
        var d1  = [], d2  = [], val = 47, numvlines = null;

        for (var i=0; i<90; ++i) {
            d1.push(RGraph.random(45,50) *  Math.sin(i / 57.29));
            d2.push(RGraph.random(35,45) * Math.sin(i / 57.29));
        }

        for (var i=0; i<90; ++i) {
            val = RGraph.random(-2,2) + val
            val = Math.min(val, 50);

            d1.push(val + 3);
            d2.push(val - 3);
        }



        var line = new RGraph.Line({
            id: 'cvs',
            data: [d1, d2],
            options: {
                filled: true,
                filledRange: true,
                filledRangeThreshold: 40,
                filledRangeThresholdColors: ['rgba(255,0,0,0.5)', 'rgba(0,0,255,0.5)'],
                fillstyle: 'red',
                colors: ['rgba(0,0,0,1)'],
                backgroundGridAutofitNumvlines: numvlines = 7,
                numxticks: numvlines,
                linewidth: 0.0001,
                tickmarks: null,
                labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun','Spare'],
                textAccessible: true
            }
        }).fadeIn({frames: 30})
        
        //
        // Set the value of the input
        //
        document.getElementById('val').value = 40;
    };
</script>